<template>
  <div>
    <my-header :backBtn="true"></my-header>
    <div style="margin: 0 auto">
      <video-player class="vjs-custom-skin"
                    :options="options"
                    @ready="playerReadied">
      </video-player>
    </div>
  </div>
</template>

<script>
  //require('vue-video-player/src/custom-theme.css')
  export default {
    name: "Play",
    components: {},
    data() {
      return {
        options: {
          height: '360',
          width:'400',
          sources: [],
          controlBar: {
            timeDivider: false,
            durationDisplay: false,
            fullscreenToggle: true
          },
          flash: {hls: {withCredentials: false}},
          html5: {hls: {withCredentials: false}},
          poster: ''
        },
      }
    },
    methods: {
      playerReadied(player) {
        var hls = player.tech({IWillNotUseThisInPlugins: true}).hls;
        player.tech_.hls.xhr.beforeRequest = function (options) {
          return options
        }
      },
    },
    created() {
      let data=this.$route.query;
      let source={
        withCredentials: false,
        type: "application/x-mpegURL",
        src: data.url
      }
      this.options.sources.push(source);
      this.options.poster=data.frontCover;
    },
    mounted() {
    }
  }
</script>

<style scoped>

</style>
